<!-- 上传照片多张 -->
<template>
  <a-modal
    title="上传相片"
    :visible="visible"
    @ok="handleOk"
    @cancel="visible = false"
    :confirmLoading="loading"
    :maskClosable="false"
    destroyOnClose
  >
    <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="图片" required>
        <UploadImg v-model="imageList" :limit="0" @change="upFileList" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { addPhoto } from '@/api/content/operate'
import UploadImg from '@/components/UpFile/uploadImg'
import { debounce ,getImagePathSmall } from '@/utils/common';
import moment from 'moment'

export default {
  components: {
    UploadImg
  },
  data() {
    return {
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      loading:false,
      fileList: [], // 图片上传列表
      imageList: [] // 图片上传列表
    }
  },
  computed: {
    ...mapGetters(['albumId'])
  },
  watch: {},
  methods: {
    ...mapActions(['GetPhoto', 'GetPhotoAlbumDetail']),
    show() {
      this.imageList = []
      this.visible = true
    },
    upFileList(fileList){
      this.fileList = fileList;
    },
   async handleOk() {
      if (!this.imageList.length) {
        return this.$message.error('请上传相片')
      } else {
        try {
          const params = this.imageList.map((url,index)=>{
            return {
              belongId: this.albumId,
              coverUrl: getImagePathSmall(url),
              name: moment().format('YYYY-MM-DD') + '_' + this.fileList[index].name,
              type: 0,
              url: url,
              size: this.fileList[index].size
            }
          })
          this.loading=true
          let { msg } = await addPhoto(params)
          this.$message.success(msg)
          this.GetPhoto()
          this.GetPhotoAlbumDetail()
          this.visible = false
        }finally{
          this.loading=false;
        }

      }
    }
  },
  created() {},
  mounted() {}
}
</script>
<style scoped></style>
